<style>
.b2-foo_flag {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 32px;
}
.b2-foo_flags__nav {
    border: 1px solid #4f4e50;
    cursor: pointer;
    display: flex;
    outline: 0;
    padding: 8px;
    position: relative;
    width: 200px;
    align-items: flex-start;
}
.b2-foo_flag img {
    width: 25px;
}
.b2-foo_flag span {
    line-height: 1;
    margin: 0 0 0 10px;
}
.b2-foo_flag svg {
    fill: #000;
    bottom: 7px;
    color: #000;
    content: "&#9660;";
    display: inline-block;
    position: absolute;
    right: 7px;
    transition: transform .3s ease-in;
}
.b2-foo_flags__list {
    background: #fefefe;
    right: 0;
    top: calc(100% + 1px);
    margin-top: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    transition: all .2s ease;
    visibility: hidden;
    width: 100%;
    z-index: 1;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}
.b2-foo_flags__list li {
    padding: 5px;
}
.b2-foo_flags__list li a {
    display: block;
    width: 100%;
    height: 100%;
}
</style>
<div class="b2-foo_flag">
  <div class="b2-foo_flags__nav">
    {% for block in section.blocks %}
      {% if block.settings.country_default %}
        <img data-src="{{block.settings.country_icon  | img_url: 'master'}}" alt="" class="lazyload b2-foo_flags__item">
        <span class="b2-foo_flags__name">{{ block.settings.country_text }}</span>
        <svg class="flags__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"></path></svg>
      {% endif %}
    {% endfor %}
    <ul class="b2-foo_flags__list">
      {% for block in section.blocks %}
        <li>
          <a href="{{block.settings.country_link}}">
            <img src="{{block.settings.country_icon  | img_url: 'master'}}" alt="">
            <span>{{ block.settings.country_text }}</span>
          </a>                
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
<script>
var footerCountry = document.querySelector('.b2-foo_flags__nav')
var footerCountryList = document.querySelector('.b2-foo_flags__list')
footerCountry.onclick = function () {
  footerCountry.classList.toggle('webFooterCountry');
  if(footerCountry.classList.contains('webFooterCountry')==true) {
    footerCountryList.style.cssText = `opacity: 1;visibility: visible;`
  }else{
    footerCountryList.style.cssText = `opacity: 0;visibility: hidden;`
  }
}

footerCountry.addEventListener('mouseover', function() {
  if(!this.flag) {
    this.flag = true;
    footerCountryList.style.cssText = ``;
  }
})
footerCountry.addEventListener('mouseleave', function() {
    footerCountry.classList.remove('webFooterCountry');
    this.flag = false;
    footerCountryList.style.cssText = ``;
})
</script>

{% schema %}
{
  "name": "切换站点",
  "class": "tablink",
  "settings": [
    
  ],
  "blocks":[
    {
      "type": "redirection",
      "name": "切换站点",
      "settings": [
        {
          "type": "checkbox",
          "id": "country_default",
          "label": "默认站点"
        },
        {
          "type": "image_picker",
          "id": "country_icon",
          "label": "站点图标"
        },
        {
          "type": "text",
          "id": "country_text",
          "label": "站点文案"
        },
        {
          "type": "text",
          "id": "country_link",
          "label": "站点链接"
        }
      ]
    }
  ]
}
{% endschema %}